import React, { Component } from "react"

const UserContext = React.createContext({
  nikeName: 'aaa',
  level: -1
})

const ThemContext = React.createContext({
  color: "black"
})

function ProfileHeader() {
  // jsx -> 嵌套的方式
  return (
    <UserContext.Consumer>
      {
        value => {
          return (
            <ThemContext.Consumer>
              {
                theme => {
                  return (
                    <div>
                      <h2 style={{ color: theme.color }}>
                        用户昵称:{value.nikeName}
                      </h2>
                      <h2>用户等级:{value.level}</h2>
                      <h2>颜色:{theme.color}</h2>
                    </div>
                  )
                }
              }
            </ThemContext.Consumer>
          )
        }
      }
    </UserContext.Consumer>
  )
}

function Profile(props) {
  return (
    <div>
      <ProfileHeader />
      <ul>
        <li>1</li>
      </ul>
    </div>
  )
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nickName: "Kobe",
      level: 99
    }
  }
  render() {
    return (
      <div>
        <UserContext.Provider value={this.state}>
          <ThemContext.Provider value={{ color: 'red' }}>
            <Profile />
          </ThemContext.Provider>
        </UserContext.Provider>
      </div>
    )
  }
}